<div class="content-section introduction">
    <div>
        <span class="feature-title">Inputtext</span>
        <span>InputText is an extension to standard input element with theming.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Basic</h3>
    <input id="input" type="text" size="30" pInputText [(ngModel)]="text"> 
    <span id="text">{{text}}</span>
    
    <h3>Float Label</h3>
    <span class="ui-float-label">
        <input id="float-input" type="text" size="30" pInputText> 
        <label for="float-input">Username</label>
    </span>

    <h3>Disabled</h3>
    <input id="disabled-input" type="text" size="30" pInputText [disabled]="disabled" />

    <button id="disabled-btn" type="button" (click)="toggleDisabled()" pButton label="Toggle"></button>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;InputTextModule&#125; from 'primeng/inputtext';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>InputText is applied to an input field with pInputText directive.</p>
            
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;input type="text" pInputText /&gt;
</code>
</pre>

            <h3>Model Binding</h3>
            <p>A model can be bound using standard ngModel directive.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;input type="text" pInputText [(ngModel)]="property"/&gt;
</code>
</pre>

            <h3>Addons</h3>
            <p>Text, icon, buttons and other content can be grouped next to an input by wrapping the addons and input inside
                .ui-inputgroup element. Multiple addons can be used within the same group as well.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;div class="ui-inputgroup"&gt;
    &lt;span class="ui-inputgroup-addon"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;input type="text" pInputText placeholder="Username"&gt;         
&lt;/div&gt;

&lt;div class="ui-inputgroup"&gt;
    &lt;span class="ui-inputgroup-addon"&gt;&lt;i class="fa fa-credit-card"&gt;&lt;/i&gt;&lt;/span&gt;  
    &lt;span class="ui-inputgroup-addon"&gt;&lt;i class="fa fa-cc-visa"&gt;&lt;/i&gt;&lt;/span&gt;   
    &lt;input type="text" pInputText placeholder="Price"&gt; 
    &lt;span class="ui-inputgroup-addon"&gt;$&lt;/span&gt;  
    &lt;span class="ui-inputgroup-addon"&gt;.00&lt;/span&gt;      
&lt;/div&gt;
</code>
</pre>

            <h3>Float Label</h3>
            <p>A floating label is implemented by wrapping the input and the label inside a container with .ui-float-label class.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;span class="ui-float-label"&gt;
    &lt;input id="float-input" type="text" size="30" pInputText&gt; 
    &lt;label for="float-input"&gt;Username&lt;/label&gt;
&lt;/span&gt;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the element should be disabled.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-inputtext</td>
                            <td>Input element</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/inputtext" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;input id="input" type="text" size="30" pInputText [(ngModel)]="text"&gt; 
&lt;span id="text"&gt;&#123;&#123;text&#125;&#125;&lt;/span&gt;

&lt;h3&gt;Float Label&lt;/h3&gt;
&lt;span class="ui-float-label"&gt;
    &lt;input id="float-input" type="text" size="30" pInputText&gt; 
    &lt;label for="float-input"&gt;Username&lt;/label&gt;
&lt;/span&gt;

&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;input id="disabled-input" type="text" size="30" pInputText [disabled]="disabled" /&gt;

&lt;button id="disabled-btn" type="button" (click)="toggleDisabled()" pButton label="Toggle"&gt;&lt;/button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class InputTextDemo &#123;

    text: string;

    disabled: boolean = true;

    toggleDisabled() &#123;
        this.disabled = !this.disabled;
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>